.item-detail{

  margin-top: 30px;
  
  .main-info{

    .pic-box{
      display: inline-block;
      width: 806px;
      min-height: 550px;
      vertical-align: top;
      padding: 10px 0;
      
      .small{
        display: inline-block;
        width: 70px;
        min-height: 70px;
        text-align: center;
        vertical-align: top;

        li{
          display: inline-block;
          margin-bottom: 20px;
          border : 1px solid #eaeaea;
          cursor: pointer;
        }
        li.active{
          @include transition(border-color,.45s);
          border-color: $primary-color;
        }
        
      }
      .big{
        display: inline-block;
        width: 706px;
        text-align: center;
        vertical-align: top;
      }

    }

    .specifications-box{
      vertical-align: top;
      display: inline-block;
      width: 434px;
      height: 444px;
      margin-left: -5px;
      min-height: 550px;
      a{
        @include unstyled-link();
      }

      .header{
        .title{
          font-size: 32px;
          color : #343434;
        }
        .desc{
          margin-top: 14px;
          font-size: 14px;
          color: #999999;
        }
      }


      .body{

        margin-top:30px;
        
        .price{
          border-top: 1px solid #eaeaea;
          border-bottom: 1px solid #eaeaea;
          color: $primary-color;
          font-size: 32px;
          padding: 20px 48px;
          sub{
            font-size: .5em;
            margin-left: 0.2em;
          }
        }

        .specifications{
          margin-top: 30px;
          .name{
            color: #666666;
          }
          ul{
            @include horizontal-list();
            margin-top: 10px;
            color:#888888;
            
            li{
              margin-top: 5px;
              margin-bottom: 5px;
              padding: 0;
              margin-left: 4px;
              a{
                display: block;
                width: 78px;
                height: 48px;
                line-height: 48px;
                text-align: center;
                border:1px solid #d3d3d3;
              }
            }
            li:nth-child(5n),li:nth-child(5n+1){
              padding-left: 0;
            }
            li.selected{
              a{
                border:1px solid $primary-color;
              }
            }
            
          }
        }

        .add-to-cart{
          margin-top: 20px;
          a{
            display: inline-block;
            height: 48px;
            line-height: 48px;
            text-align: center;
            color: #ffffff;
          }
          
          .to-cart{
            background: $primary-color;
            width: 55%;
          }
          .to-favorate{
            background: #898989;
            width: 40%;
            margin-left: 16px;
          }
          
        }
        
        .user-faq{
          margin-top: 20px;
          border-top: 1px solid #eaeaea;
          border-bottom: 1px solid #eaeaea;

          ul{
            padding: 10px 0;
            
            li{
              display: inline-block;
              width: 140px;
              a{
                display: block;
                padding: 10px 0;
                text-align: center;
                font-size: 14px;
                color : #696969;
                i{
                  margin-right: 6px;
                }
              }
              a:hover{
                color: $primary-color;
              }
            }
            li:nth-child(2){
              a{
                border-left: 1px solid #eaeaea;
                border-right: 1px solid #eaeaea;
              }
            }
            
          }

        }
        
        .more{
          margin-top: 20px;
         a{
           color: #696969;
           @include transition-duration(.25s);
           i{
             margin-right: 6px;
           }
         }
          a:hover{
            color: $primary-color;
          }
        }
      }

    }


  }

  .sub-nav{
    border-top: 1px solid #eaeaea;
    margin-top: 20px;
    height: 60px;
    background: #ffffff;
    @include transition-duration(.45s);

    .sub-nav-info{
      vertical-align: top;
      display: inline-block;
      width: 20%;
      
      dt,dd{
        display: inline-block;
        vertical-align: top;
      }
      dd{
        padding-top: 10px;
        span{
          color: #969696;
          font-size: 14px;
        }
        p{
          margin-top: 10px;
          color :$primary-color;
        }
      }
      
    }
    .item-desc-menu{
      vertical-align: top;
      display: inline-block;
      width: 60%;
      margin-left: -5px;

      ul{
        @include horizontal-list();
        li{
          width: 172px;
          padding: 0;
          text-align: center;
          margin-top: 10px;
          color: #969696;
          overflow: hidden;
          font-size: 18px;
          a{
            display: block;
            height: 40px;
            line-height: 40px;
            border-right: 1px solid #eaeaea;
            @include unstyled-link();
          }
          a:hover{
            cursor: pointer;
            color:$primary-color;
          }
        }
        li.current{
          a{
            color: $primary-color;
          }
        }
      }

    }
    .sub-nav-button{
      vertical-align: top;
      display: inline-block;
      width: 20%;
      margin-left: -5px;
      a{
        @include unstyled-link();
        color: #ffffff;
        text-align: center;
        line-height: 40px;
        display: block;
        width: 80%;
        margin-left: 20%;
        height: 40px;
        margin-top: 10px;
        background: $primary-color;
        i{
          margin-right: 6px;
        }
      }
    }
  }
  .sub-nav-fixed{
    position:fixed;
    top: 0;
    margin-top: 0;
    width: $container-width;
    @include transition-duration(.45s);
    @include box-shadow(0 3px 20px rgba(0,0,0,.4));
  }
  
  .item-desc{
    min-width: $container-width;
    background: #f5f5f5;
    margin-top: 20px;
    img{
      margin-bottom: 40px;
    }
  }

  .item-parameter{
    margin-top: 40px;
    background: #f5f5f5;
    padding-bottom: 20px;
    .header{
      text-align: center;
      .line{
        width: 100%;
        height: 34px;
        border-bottom: 1px solid #eaeaea;
      }
      h2{
        width: 200px;
        background: #f5f5f5;
        margin: auto;
        margin-top: -14px;
        padding-bottom: 20px;
        font-size: 32px;
        padding: 0 20px;
        color: #969696;
      }
    }
    .body{
      background: #ffffff;
      margin-top: 20px;
      padding-top: 40px;
      padding-left: 40px;;

      .item-pic{
        width: 20%;
        display: inline-block;
        vertical-align: top;
      }
      .item-parameters{
        width: 80%;
        margin-left: -5px;
        display: inline-block;
        ul{
          @include horizontal-list();
          li{
            padding: 0;
            display: inline-block;
            width: 320px;
            text-align: left;
            padding: 10px 0;
          }
        }
      }
    }
  }

  .item-comment{
   padding-top: 40px;
    background: #f5f5f5;
    padding-bottom: 20px;
    .header{
      text-align: center;
      .line{
        width: 100%;
        height: 34px;
        border-bottom: 1px solid #eaeaea;
      }
      h2{
        width: 200px;
        background: #f5f5f5;
        margin: auto;
        margin-top: -14px;
        padding-bottom: 20px;
        font-size: 32px;
        padding: 0 20px;
        color: #969696;
      }
    }
    .body{
      background: #ffffff;
      margin-top: 20px;
      padding-top: 40px;
      padding-left: 40px;
      padding-bottom: 20px;

      .main-block{
        ul{
          @include horizontal-list();
          .percent{
            text-align: center;
            width: 300px;
            i{
              font-size: 80px;
              color: $primary-color;
              display: block;
            }
            span{
              color:#696969;
            }
          }

          .first, .second{
            width: 360px;
            padding: 0;
            margin-left: 50px;
           .face_img{
             vertical-align: top;
             width: 40px;
             height: 40px;
             border-radius: 20px;
             text-align: center;
             line-height: 40px;
             overflow: hidden;
             display: inline-block;
             img{
               width: 40px;
               height: 40px;
             }
           }

            .name
            {
              display: inline-block;
              font-size: 14px;
              color:#898989;
              height: 40px;
              width: 200px;
              margin-left: 20px;
              line-height: 40px;
            }
            
            dd{
              font-size: 16px;
              margin-top: 20px;
              line-height: 30px;
              text-align: left;
              white-space: normal;
              width: 360px;
              height: 94px;
              overflow: hidden;
            }

          }
          .first{
            color: $primary-color;
          }
          .second{
            color: #454545;
          }

        }
      }

    }
    .footer{
      margin-top: 20px;


      .detail-comment{

        .left,.right{
          display: inline-block;
        }
        .left{
          vertical-align: top;
          width: 850px;
          min-height: 120px;
          .comment-box{
            @include horizontal-list(0);
            
            li{
              width: 100%;
              min-height: 60px;
              background: #ffffff;
              border-left:2px solid;
              margin-top: 20px;
              padding-top: 20px;

              .user-face{
                vertical-align: top;
                display: inline-block;
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                @include border-radius(20px);
                overflow: hidden;
                margin-left: 20px;
                img{
                  width: 40px;
                  height: 40px;
                }
              }

              .comment{
                vertical-align: top;
                display: inline-block;
                margin-left: 20px;
                width: 640px;
                .detail{
                  margin-top: 10px;
                  font-size: 18px;
                  color:#696969;
                  line-height: 30px;
                  padding-bottom: 10px;
                  white-space: normal;
                }
                .img{
                  margin-top: 10px;
                  margin-bottom: 20px;
                  img{
                    width: 160px;
                    height: 160px;
                  }
                }
              }

              .user-emoj{
                display: inline-block;
                margin-left: 20px;
                font-size: 18px;
                color:$primary-color;
                padding-top: 14px;
              }

            }
            
            li:nth-child(5n+1){
              border-color: #ffac13;;
            }
            li:nth-child(5n+2){
              border-color: #83c44e;
            }
            li:nth-child(5n+3){
              border-color: #2196f3;
            }
            li:nth-child(5n+4){
              border-color:#e53935;
            }
            li:nth-child(5n+5){
              border-color:#00c0a5;
            }
          }

        }
        .right{
          width: 360px;
          min-height: 120px;
          margin-left: 25px;
        }

      }

    }
  }

}